import { Select } from 'antd';
import { FormInstance } from 'antd/lib/form';
import React from 'react';
import { Component } from 'react';
const Option = Select.Option;

interface SearchAbleSelectProps {
  searchData?: (keyword: string) => Promise<Array<{ key: string; value: string }>>;
  style?: React.CSSProperties;
  form?: FormInstance;
  name?: string;
  placeholder?: string;
  isMultiple?: boolean;
  maxCount?: number;
  getValue?: (value: any) => any;
  initialValue?: any;
  disabled?: boolean;
  values?: any
  ref?:any;
}

function defaultSearch(keyword: string) {
  return Promise.resolve([
    { key: '测试1', value: '1' },
    { key: '测试2', value: '2' },
    { key: '测试3', value: '3' },
    { key: '测试4', value: '4' },
  ]);
}

interface SearchAbleSelectState {
  options: Array<any>;
  ifDisabled?: boolean;
  values: any;
}
class SearchAbleSelect extends Component<SearchAbleSelectProps, SearchAbleSelectState> {
  constructor(props: SearchAbleSelectProps) {
    super(props);
    this.state = {
      options: [],
      ifDisabled: props.disabled ? props.disabled : false,
      values: props.values,
    };
  }
  componentDidMount() {
    this.onSearch('');
    this.props.ref? this.props.ref(this) :null;
  }
  componentWillReceiveProps(props: SearchAbleSelectProps, state: SearchAbleSelectState) {
    this.setState({ values: props.values,ifDisabled:props.disabled })
  }
  onChange(value: any) {
    var data = {};
    if(value === 0 ){
      return;
    }
    else if(typeof value === "object"){
      if(value.indexOf(0)>=0){
        value.splice(value.indexOf(0),1);
      }
    }
    data[this.props.name!] = value;
    if (this.props.isMultiple && this.props.maxCount) {
      if (value.length <= this.props.maxCount) {
        this.setState({ values: value });
        this.props.form?.setFieldsValue(data);
        this.props.getValue?.(data);
      }
    } else {
      this.setState({ values: value });
      this.props.form?.setFieldsValue(data);
      this.props.getValue?.(data);
    }

  }

  onFocus() { }

  async onSearch(keyword: string) {
    var data = [];
    if (this.props.searchData) {
      data = await this.props.searchData(keyword);
    } else {
      data = await defaultSearch(keyword);
    }
 
    data = [{value:0,key:"暂未选择"},...data]
    this.setState({ options: data });
  }

  render() {
    return this.props.isMultiple ? (
      <Select
        disabled={this.state.ifDisabled}
        mode="multiple"
        maxTagCount={this.props.maxCount}
        showSearch
        value={this.state.values}
        style={this.props.style}
        placeholder={this.props.placeholder}
        optionFilterProp="children"
        onChange={this.onChange.bind(this)}
        onFocus={this.onFocus}
        onSearch={this.onSearch.bind(this)}
        defaultValue={this.props.initialValue}
      >
        {this.state.options.map((item, index) => (
          <Option value={item.value} key={index}>
            {item.key}
          </Option>
        ))}
      </Select>
    ) : (
        <Select
          disabled={this.state.ifDisabled}
          showSearch
          value={this.state.values}
          style={this.props.style}
          placeholder={this.props.placeholder}
          optionFilterProp="children"
          onChange={this.onChange.bind(this)}
          onFocus={this.onFocus}
          onSearch={this.onSearch.bind(this)}
          defaultValue={this.props.initialValue}
        >
          {this.state.options.map((item, index) => (
            <Option value={item.value} key={index}>
              {item.key}
            </Option>
          ))}

        </Select>
      );
  }
}

export default SearchAbleSelect;
